icon-new<template>
  <div class="index">
    <NavBar/>
    <div class="container">
      <div class="w73 plan-l">
        <span class="fl guid">
          <router-link tag="a" :to="{path:'/'}">首页</router-link>
          <i>></i>
          <router-link tag="a" :to="{path:'/plan'}">计划</router-link>
          <i>></i>
          <h1>最新计划</h1>
        </span>
        <!-- 最新计划 -->
        <div class="new-plan plan">
          <PlanTitle title="最新计划" iconClass="icon-new" />
          <PlanItem :planList="planListNew" @buyNowFn="buy" />
        </div>
      </div>
      <div class="w23 fr plan-r">
        <div class="item jhgl">
          <img src="https://dummyimage.com/150x150/4A7BF7&text=hello">
        </div>
        <!-- 热门订阅 -->
        <HotSubscribe :list="bestSaleList" />
        <!-- 牛人榜 -->
        <MasterList :list="masterList" />
      </div>
      <EvaluatingBox :showFlag="showEvaluatingBoxFlag" @closeFn="ctrlEvaluatingBox" />
    </div>
    <Footer/>
  </div>
</template>
<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import PlanItem from '@/components/plan/plan-item'
import PlanTitle from '@/components/plan/plan-title'
import HotSubscribe from '@/components/plan/hot-subscribe'
import MasterList from '@/components/plan/master-list'
import EvaluatingBox from '@/components/plan/evaluating-box'
import {
  getLastPlanList,
  getBestExpertList,
  getBestSaleList,
  getHottestList
} from '@/service/api'
import { mapState } from 'vuex'
export default {
  components: {
    NavBar,
    Footer,
    PlanItem,
    PlanTitle,
    HotSubscribe,
    MasterList,
    EvaluatingBox
  },
  data () {
    return {
      viewData: {},
      total: null,
      tagView: 'recommend',
      // 最新
      searchDataNew: {
        pageSize: 9,
        pageNum: 1
      },
      showView: true,
      layerLoad: null,
      loading: false,
      isLoadingMore: false, // 加载更多
      showEvaluatingBoxFlag: false, // 是否显示评测提示窗口
      planListNew: [],
      masterList: [],
      bestSaleList: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initData()
      if (window.layer) {
        this.layerLoad = window.layer.load(0, {
          shade: false
        })
      }
    })
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    userI () {
      return this.$store.state.me.sysUser.userId
    },
    ...mapState({
      userInfo: state => state.me.sysUser || {}
    }),
    curRoute () {
      return this.$route.path
    }
  },
  methods: {
    /**
     * 初始化页面数据，多个ajax同时请求
     */
    initData () {
      Promise.all([
        this.getPlanListNew(),
        this.getMasterList(),
        this.getBestSaleInfo()
      ]).then((res) => {
        // 计划列表 最新
        let planData = res[0]
        if (planData.status === 200) {
          if (planData.data) {
            this.planListNew = planData.data.data.list
          }
        }
        // 牛人列表
        let masterData = res[1]
        if (masterData.status === 200) {
          let tempData = masterData.data
          if (tempData && tempData.data) {
            this.masterList = tempData.data
          }
        }
        // 热门订阅列表
        let bestSaleData = res[2]
        if (bestSaleData.status === 200) {
          let tempData = bestSaleData.data
          if (tempData && tempData.data) {
            this.bestSaleList = tempData.data.list
          }
        }
        window.layer.close(this.layerLoad)
      }).catch((e) => {
        console.log(e)
      })
    },
    loadMore () {
      this.isLoadingMore = true
      this.searchDataHot.pageNum++
      this.getPlanListHot().then((res) => {
        if (res.data && res.data.code === 200) {
          this.planListHot.push(...res.data.data.list)
        } else {
          this.searchDataHot.pageNum--
          window.layui.layer.msg('数据加载，请重新加载')
        }
        this.isLoadingMore = false
      })
    },
    linkToDashboard (itemId) {
      if (this.userId === itemId) {
        if (this.userInfo.authType === '0') {
          this.$router.push('/dashboardUser/live')
        } else {
          this.$router.push('/dashboardAuth')
        }
      } else {
        this.$router.push('/dashboard/live/' + itemId)
      }
    },
    // async modifyUserFocus (item) {
    //   await api.modifyUserFocus({
    //     focusUserId: item.userId,
    //     focusStatus: item.isMyFocus === '0' ? '1' : '0'
    //   })
    //   this.getViewpintInfo()
    // },
    /**
     * 获取计划列表 最新
     * @param isLoadMore 是否为点击加载更多调用
     */
    async getPlanListNew (isLoadMore) {
      let res = await getLastPlanList({ ...this.searchDataNew })
      if (!this.isLoadMore) {
        return res
      }
      this.planListNew.push(...res.data.data.list)
      this.total = res.data.data.total
      this.isLoadingMore = false
    },

    /**
     * 获取计划列表 火热
     */
    async getPlanListHot () {
      let res = await getHottestList({ ...this.searchDataHot })
      return res
    },
    // async getAttentionArticleList () {
    //   let res = await api.getAttentionArticleList({ ...this.searchDataNew })
    //   if (this.searchDataNew.pageNum === 1) {
    //     this.articleList = res.data.data.list
    //   } else {
    //     this.articleList = this.articleList.concat(res.data.data.list)
    //   }
    //   this.total = res.data.data.total
    //   this.$nextTick(() => {
    //     window.layer.close(this.layerLoad)
    //   })
    // },
    async getMasterList () {
      let res = await getBestExpertList({ pageNum: 1, pageSize: 5 })
      return res
    },
    async getBestSaleInfo () {
      let res = await getBestSaleList({ pageNum: 1, pageSize: 5 })
      return res
    },
    buy (id) {
      // 评测
      // if (true) {
      this.ctrlEvaluatingBox()
      // return
      // }
      // console.log(id)
    },
    ctrlEvaluatingBox () {
      this.showEvaluatingBoxFlag = !this.showEvaluatingBoxFlag
    }
  }
}
</script>
<style lang='scss' scoped>
@import "../../style/res/plan.scss";
.new-plan {
  margin-top: 50px;
}
</style>
